<template>
  <div class="org-select">
    <div v-for="item in value" :key="item.orgId" class="item">
      <template v-if="selectOrgs.includes(item.orgId) || level === item.level">
        <div class="org" @click.capture="selectOrg(item)" v-if="level === item.level">
          <div>
            <i class="fa fa-sitemap"></i>
            <span class="title">{{ item.orgDesc }}</span>
          </div>
          <Icon
            type="angle-right"
            v-if="
              (item.children && item.children.length > 0) ||
                (item.users &&
                  item.users.length > 0 &&
                  item.children &&
                  item.children.length === 0)
            "
          />
        </div>

        <org-select
          :value="item.children"
          :level="level"
          :selectOrgs="selectOrgs"
          :selectUsers="selectUsers"
          @selectOrg="selectOrg"
          @selectUser="selectUser"
        ></org-select>
        <template
          v-if="
            item.users &&
              item.users.length > 0 &&
              selectOrgs[selectOrgs.length - 1] === item.orgId
          "
        >
          <div
            v-for="user in item.users"
            :key="user.username"
            :class="['people-list',{'selected': selectUsers.includes(user.username) }]"
            @click="selectUser(user)"
          >
            <span class="avatar">{{user.avatar}}</span>
            <span class="name">{{ user.realname }}</span>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'orgSelect',
  props: {
    value: {
      typeof: Array,
      default() {
        return [];
      },
    },
    level: {
      type: Number,
      default: 0,
    },
    selectOrgs: {
      typeof: Array,
      default() {
        return [];
      },
    },
    selectUsers: {
      typeof: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    lastOrg() {
      console.log(this.selectOrgs);
      return this.selectOrgs[-1];
    },
  },
  methods: {
    selectOrg(item) {
      if(item.users?.length || item.children?.length){
        this.$emit('selectOrg', item);
      }
    },
    selectUser(item) {
      this.$emit('selectUser', item);
    },
  },
};
</script>

<style lang="less" scoped>
.org-select {
  .item {
    // font-size: 14px;
    .org {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      padding: 7px 10px;
      &:hover {
        background-color: #f2f2f2;
      }
      .title {
        width: 95%;
        margin-left: 6px;
      }
    }
    .selected {
      background-color: #f2f2f2;
    }
    .people-list {
      display: flex;
      align-items: center;
      padding: 5px 10px;
      &:hover {
        background-color: #f2f2f2;
      }
      .avatar {
        display: inline-block;
        // width: 10px;
        padding: 2px 5px;
        border-radius: 50%;
        color: white;
        background-color: #95a3b9;
      }
      .name {
        margin-left: 10px;
      }
    }
  }
}
</style>
